import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';
import { Demo6Component } from './demo6/demo6.component';
import { Demo7Component } from './demo7/demo7.component';
import { Demo8Component } from './demo8/demo8.component';
import { Demo9Component } from './demo9/demo9.component';

export const TimeSliderConfig = {
  location: 'TimeSlider',
  description: '通过拖拽时间轴上的滑块来选择日期范围。',
  description_en: 'Select the date range by dragging the slider on the Time scale.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/time-slider/demo1/demo1.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic use',
      demoDescription: '基础用法。',
      demoDescription_en: 'Basic use.'
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/time-slider/demo2/demo2.component',
      demoTitle: '日期格式',
      demoTitle_en: 'Date format',
      demoDescription: '自定义日期显示格式。',
      demoDescription_en: 'Customize date display format.'
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/time-slider/demo3/demo3.component',
      demoTitle: '时间粒度',
      demoTitle_en: 'Step',
      demoDescription: '自定义时间粒度。',
      demoDescription_en: 'Customize time Step.'
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/time-slider/demo4/demo4.component',
      demoTitle: '缩放系数',
      demoTitle_en: 'Zoom',
      demoDescription: '自定义缩放系数。',
      demoDescription_en: 'Customize zoom.'
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/time-slider/demo5/demo5.component',
      demoTitle: '刻度间最大间距',
      demoTitle_en: 'Maximum distance between scales',
      demoDescription: '自定义刻度间最大间距。',
      demoDescription_en: 'Customize Maximum distance between scales.'
    },
    {
      demo: Demo6Component,
      codePath: 'showcase/time-slider/demo6/demo6.component',
      demoTitle: '提示信息',
      demoTitle_en: 'Tooltip',
      demoDescription: '自定义提示信息。',
      demoDescription_en: 'Customize tooltip.'
    },
    {
      demo: Demo7Component,
      codePath: 'showcase/time-slider/demo7/demo7.component',
      demoTitle: '动态改变时间范围',
      demoTitle_en: 'Dynamically change the time range',
      demoDescription: '动态改变时间范围。',
      demoDescription_en: 'Dynamically change the time range.'
    },
    {
      demo: Demo8Component,
      codePath: 'showcase/time-slider/demo8/demo8.component',
      demoTitle: '下拉切换时间范围',
      demoTitle_en: 'Pull-down switching time range',
      demoDescription: '下拉切换时间范围。',
      demoDescription_en: 'Pull-down switching time range.'
    },
    {
      demo: Demo9Component,
      codePath: 'showcase/time-slider/demo9/demo9.component',
      demoTitle: '指定时区',
      demoTitle_en: 'Specified Time Zone',
      demoDescription: '指定时区获取时间，值为目标时间与格林威治标准时间 (GMT) 的分钟差。',
      demoDescription_en: 'Specifies the time zone. The value is the minute difference between the target time and the GMT.'
    }
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-time-slider',
  snippet: `<lv-time-slider></lv-time-slider>`,
  mApi: [
    {
      name: 'lv-time-slider',
      name_en: 'lv-time-slider',
      api: [
        {
          attribute: 'lvRange',
          type: 'Date[]',
          default: '[null, null]',
          description: '时间轴显示的时间范围。',
          description_en: 'The time range on the Time scale.'
        },
        {
          attribute: 'lvValue',
          type: 'Date[]',
          default: '[null, null]',
          description: '时间轴上选取的时间范围。',
          description_en: 'The time selected on the Time scale.'
        },
        {
          attribute: 'lvFormat',
          type: 'string | ((date: Date) => string)',
          default: 'MM-dd HH:mm',
          description: '日期的显示格式。用法可参见 Angular DatePipe',
          description_en: 'Date display format. For details, see Angular DatePipe.'
        },
        {
          attribute: 'lvTimezoneOffset',
          type: 'number',
          default: '--',
          description: `本地时间与格林威治标准时间 (GMT) 的分钟差。`,
          description_en: `Indicates the minute difference between the local time and the Greenwich Mean Time (GMT).`,
          global: true
        },
        {
          attribute: 'lvStep',
          type: '[number, string: "Year" | "Month" | "Day"| "Hour"| "Minute"]',
          default: '[1, "Hour"]',
          description: '定义时间显示粒度。',
          description_en: 'Define the time granularity.'
        },
        {
          attribute: 'lvSpeed',
          type: 'number',
          default: '0.2',
          description: '鼠标滚轮缩放系数。',
          description_en: 'Mouse wheel zoom factor.'
        },
        {
          attribute: 'lvSpace',
          type: 'number',
          default: '60',
          description: '定义 Label 显示宽度。',
          description_en: 'Define the label width.'
        },
        {
          attribute: 'lvTooltip',
          type: 'boolean | TemplateRef',
          default: 'true',
          description: '自定义提示文字。值为 false 时不显示提示信息。',
          description_en: 'Customize the tooltip text. When the value is false, no tooltip is displayed.'
        },
        {
          attribute: 'lvTooltipTheme',
          type: 'string',
          default: 'dark',
          description: `提示框主题，可选值为 ('dark' | 'light')。`,
          description_en: `Theme of the tipbox. Value: ('dark' | 'light').`,
          global: true
        }
      ],
      event: [
        {
          event: 'lvValueChange',
          parameter: 'Date[]',
          description: '当 lvValue 的值发生改变时，会触发 lvValueChange 事件。',
          description_en: 'When the lvValue changes, the lvValueChange event will be triggered.'
        },
        {
          event: 'lvSliderDragEnd',
          parameter: 'Date[]',
          description: '当时间滑块拖动结束时，会触发 lvSliderDragEnd 事件。',
          description_en: 'When the Slider dragging ends, the lvSliderDragEnd event will be triggered.'
        }
      ]
    }
  ]
};
